<template>
  <div class="app-container">

    <div style="display: flex;flex-wrap: wrap;justify-content: center;">
      <div class="header-bar">
        <h1 class="project-title">{{title}}</h1>

        <div class="vertical-divider"></div>

        <div class="datetime-container">
          <div class="time-text" id="time">{{ time }}</div>
          <div class="date-text" id="date">{{ date }}</div>
        </div>
      </div>

      <div class="search-container" style="height: min-content;margin: auto;">
        <!-- 百度图标 -->
        <svg class="baidu-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" p-id="10281" width="200"
             height="200">
          <path
            d="M401.990076 573.726824h66.517629v345.379993h-115.126665c-12.791852 0-25.583703 0-38.375554-2.55837-25.583703-5.116741-48.609036-20.466963-63.959258-40.933925-12.791852-15.350222-20.466963-33.258814-23.025333-53.725777-2.55837-20.466963-2.55837-40.933925 0-61.400888 5.116741-23.025333 17.908592-43.492295 33.258814-58.842517 12.791852-12.791852 30.700444-23.025333 48.609036-28.142074 7.675111-2.55837 15.350222-5.116741 23.025333-5.11674h69.075998v-94.659702m-71.634369 156.060589c-12.791852 5.116741-25.583703 15.350222-33.258814 28.142074-5.116741 12.791852-7.675111 25.583703-7.675111 35.817184 0 15.350222 5.116741 30.700444 12.791852 43.492296 10.233481 15.350222 28.142073 23.025333 46.050666 23.025333h53.725776v-138.151998h-58.842517c-5.116741 2.55837-10.233481 5.116741-12.791852 7.675111z m173.969182-56.284147h66.517628v161.17733c0 7.675111 2.55837 12.791852 7.675111 17.908593 5.116741 5.116741 12.791852 7.675111 20.466963 7.675111h69.075998v-186.761034h66.517629v243.045181h-158.61896c-17.908592-2.55837-33.258814-7.675111-46.050666-17.908593-15.350222-12.791852-23.025333-33.258814-23.025333-51.167406-2.55837-56.284147-2.55837-115.126664-2.55837-173.969182z"
            fill="#FCFBFF" p-id="10282"></path>
          <path
            d="M373.848003 0.651873c20.466963-2.55837 40.933925 2.55837 58.842517 12.791851 25.583703 17.908592 43.492295 46.050666 53.725777 74.19274 15.350222 46.050666 15.350222 97.218072-2.55837 143.268737-7.675111 23.025333-23.025333 43.492295-40.933926 58.842518-15.350222 12.791852-33.258814 20.466963-53.725776 20.466962s-38.375555-7.675111-53.725777-17.908592c-25.583703-17.908592-40.933925-46.050666-48.609036-76.75111-12.791852-43.492295-12.791852-92.101331 5.116741-135.593626 10.233481-25.583703 25.583703-48.609036 48.609036-66.517629 5.116741-2.55837 17.908592-10.233481 33.258814-12.791851z m294.212586 23.025333c15.350222-2.55837 28.142073 0 40.933925 7.675111 17.908592 7.675111 33.258814 23.025333 46.050666 38.375554 17.908592 23.025333 28.142073 48.609036 33.258814 76.75111 2.55837 20.466963 0 38.375555-5.11674 58.842517-7.675111 23.025333-15.350222 43.492295-30.700444 63.959258-12.791852 17.908592-25.583703 30.700444-43.492296 43.492296-15.350222 10.233481-35.817184 15.350222-53.725776 12.791851-23.025333-2.55837-46.050666-10.233481-63.959258-25.583703s-28.142073-38.375555-30.700444-61.400888c-5.116741-25.583703-5.116741-48.609036-2.55837-74.192739 2.55837-23.025333 12.791852-43.492295 23.025333-61.400888 12.791852-20.466963 25.583703-38.375555 43.492295-51.167406 10.233481-15.350222 25.583703-23.025333 43.492295-28.142073zM138.477934 233.463572c20.466963-5.116741 43.492295 0 63.959258 10.233481 28.142073 15.350222 48.609036 40.933925 63.959257 69.075999 5.116741 12.791852 10.233481 25.583703 10.233482 38.375554 2.55837 33.258814 2.55837 66.517628-7.675111 97.218072-5.116741 20.466963-17.908592 40.933925-35.817185 56.284147-20.466963 17.908592-48.609036 28.142073-76.751109 28.142074-23.025333 0-46.050666-7.675111-63.959258-23.025333-23.025333-20.466963-38.375555-48.609036-46.050666-79.30948-5.116741-20.466963-7.675111-40.933925-5.116741-61.400887 5.116741-33.258814 15.350222-69.075999 33.258815-97.218073 17.908592-17.908592 38.375555-33.258814 63.959258-38.375554z m688.201615 76.751109c25.583703-2.55837 51.167406 0 74.192739 12.791852 20.466963 10.233481 38.375555 30.700444 48.609036 51.167406 10.233481 17.908592 15.350222 35.817184 17.908593 56.284147 0 28.142073 2.55837 56.284147-5.116741 84.426221-5.116741 20.466963-10.233481 38.375555-23.025333 53.725776-12.791852 15.350222-28.142073 25.583703-46.050666 30.700444-17.908592 5.116741-38.375555 5.116741-56.284147 2.558371-23.025333-2.55837-46.050666-7.675111-63.959258-23.025333-15.350222-12.791852-25.583703-30.700444-33.258814-48.609036-7.675111-25.583703-7.675111-51.167406-7.675111-79.30948s5.116741-56.284147 15.350222-81.86785c7.675111-17.908592 20.466963-35.817184 40.933925-46.050666 10.233481-7.675111 23.025333-12.791852 38.375555-12.791852z m-342.821622 102.334813c25.583703-2.55837 51.167406 2.55837 76.751109 12.791852 35.817184 17.908592 63.959258 48.609036 86.984591 81.86785 25.583703 38.375555 58.842517 74.192739 89.542961 107.451553 30.700444 30.700444 63.959258 61.400888 97.218072 89.542961 5.116741 5.116741 12.791852 10.233481 17.908592 15.350222 25.583703 25.583703 40.933925 61.400888 46.050666 99.776443 2.55837 38.375555-5.116741 76.75111-20.466963 112.568294-12.791852 25.583703-33.258814 48.609036-56.284147 61.400887-35.817184 17.908592-74.192739 23.025333-115.126664 23.025333-38.375555-2.55837-76.75111-7.675111-112.568294-20.466962-43.492295-12.791852-89.542961-15.350222-135.593627-10.233482-20.466963 2.55837-40.933925 7.675111-61.400887 10.233482-46.050666 7.675111-94.659702 10.233481-143.268738 7.67511-40.933925 0-76.75111-20.466963-102.334813-51.167406-15.350222-17.908592-25.583703-40.933925-33.258814-63.959258-7.675111-20.466963-10.233481-43.492295-10.233481-66.517628 0-25.583703 10.233481-53.725777 23.025333-76.75111 20.466963-35.817184 48.609036-63.959258 79.309479-86.98459 10.233481-7.675111 17.908592-12.791852 25.583704-23.025333 15.350222-12.791852 30.700444-25.583703 46.050665-40.933925 28.142073-25.583703 53.725777-53.725777 74.19274-86.984591 5.116741-7.675111 10.233481-17.908592 17.908592-28.142074 23.025333-35.817184 63.959258-63.959258 110.009924-66.517628m-81.867851 161.17733v97.218072H332.914078c-7.675111 0-15.350222 2.55837-23.025333 5.116741-17.908592 5.116741-35.817184 15.350222-48.609036 28.142073-15.350222 15.350222-28.142073 35.817184-33.258814 58.842518-2.55837 20.466963-2.55837 40.933925 0 61.400887 2.55837 17.908592 10.233481 38.375555 23.025333 53.725777 15.350222 20.466963 38.375555 35.817184 63.959258 40.933925 12.791852 2.55837 25.583703 2.55837 38.375554 2.55837h115.126665V576.285194c-23.025333-2.55837-43.492295-2.55837-66.517629-2.55837m102.334813 99.776442v173.969182c0 20.466963 7.675111 38.375555 23.025333 51.167406 12.791852 10.233481 30.700444 17.908592 46.050666 17.908593h158.618959v-243.045181H665.502219v186.761034h-69.075999c-7.675111 0-15.350222-2.55837-20.466962-7.675111-5.116741-5.116741-7.675111-12.791852-7.675111-17.908593v-161.17733h-63.959258z"
            fill="#306CFF" p-id="10283"></path>
          <path
            d="M330.355707 729.787413c5.116741-2.55837 10.233481-5.116741 15.350222-5.11674h58.842518v138.151997h-53.725777c-17.908592 0-35.817184-7.675111-46.050666-23.025333-7.675111-12.791852-12.791852-28.142073-12.791851-43.492295 0-12.791852 2.55837-25.583703 7.675111-35.817185 2.55837-15.350222 15.350222-25.583703 30.700443-30.700444z"
            fill="#306CFF" p-id="10284"></path>
        </svg>

        <input type="text" class="search-input" v-model="searchBody" placeholder="百度一下，你就知道"
               @keyup.enter="performSearch">

        <svg class="search-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"
             xmlns="http://www.w3.org/2000/svg" @click="performSearch">
          <path
            d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round"/>
        </svg>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "dashboard_search",
  props: {
    title: {
      type: String,
      default: "IndSvr-行动"
    }
  },
  data() {
    return {
      date: null,
      time: null,
      searchBody: null,
    }
  },
  methods: {
    // 实时日期时间更新（日期在下，时间在上）
    updateDateTime() {
      const now = new Date();

      // 日期格式：2025年8月28日 星期四
      const dateOptions = {year: 'numeric', month: 'long', day: 'numeric', weekday: 'long'};
      const dateText = now.toLocaleDateString('zh-CN', dateOptions);

      // 时间格式：16:52:35
      const timeOptions = {hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false};
      const timeText = now.toLocaleTimeString('zh-CN', timeOptions);

      this.date = dateText;
      this.time = timeText;

    },
    performSearch() {
      const query = this.searchBody.trim();
      if (query) {
        // 实际应用中可替换为百度搜索链接
        window.open(`https://www.baidu.com/s?wd=${encodeURIComponent(query)}`, '_blank');
      }
    },
  },
  computed: {},
  created() {

    // 初始化并每秒更新时间
    this.updateDateTime();
    setInterval(this.updateDateTime, 1000);

  },
  filters: {}
}
</script>
<style scoped>

.vertical-divider {
  width: 4px;
  height: 40px;
  background-color: white;
  margin: 0 10px; /* 可选：添加一些左右间距 */
}

.header-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 28px;
  width: 100%;
}

.project-title {
  font-size: 4vw; /* 大幅增大标题 */
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
  letter-spacing: 1px;
}

.datetime-container {
  color: rgba(255, 255, 255, 0.95);
  //background: rgba(0, 0, 0, 0.2);
  //backdrop-filter: blur(8px);
  padding: 0.4vw 0.8vw;
  border-radius: 1.4vw;
  //box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  //border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: left;
}

.date-text {
  font-size: 0.8vw; /* 日期文字大小 */
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

.time-text {
  font-size: 2vw; /* 时间文字大小（更大） */
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
  font-weight: 500;
}

.search-container {
  position: relative;
  width: 60%; /* 搜索框宽度占满容器 */
  min-width: 240px;
  padding: 10px 24px; /* 增加内边距 */
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(140, 140, 140, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.baidu-icon {
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
}

.search-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 18px; /* 增大输入文字 */
  color: #ffffff;
  padding: 0 45px 0 65px; /* 左侧预留图标空间 */
  height: 36px;
  line-height: 36px;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.54);
  font-size: 17px;
}

.search-icon {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffffff;
  cursor: pointer;
  transition: color 0.2s ease;
  width: 24px;
  height: 24px;
}

.search-icon:hover {
  color: #1a73e8;
}

.search-container:focus-within {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  transform: translateY(-3px);
}
</style>
